1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
import _ from 'lodash';
import type { GetStaticPropsContext, NextPage } from 'next';
import ReactMarkdown from 'react-markdown';
import Head from 'next/head';
import Emoji from '../Emoji';
import Image from '../Image';
import emojiPlugin from '../emojiPlugin';
import remarkGemoji from 'remark-gemoji';
import benzinConfig from '../config';
import Code from '../Code';
import remarkGfm from 'remark-gfm';
import rehypeSlug from 'rehype-slug';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
const transformLinkUri = (uri: string): string => {
return uri.match(/(.*)\.md/)?.[1] || uri;
}
/* Image sources are relative to CDN root */
const transformImageUri = (uri: string): string => {
return uri.startsWith('http') ? uri : benzinConfig.CDN + uri;
}
/* Disable JavaScript in runtime */
export const config = {
unstable_runtimeJS: false,
};
export const getStaticProps = async (context: GetStaticPropsContext) => {
const path = _.compact(_.isArray(context.params?.path)
? context.params?.path
: [context.params?.path]
);
const originalSource = await benzinConfig.adapter.getMarkdownSource(benzinConfig.CDN, path);
const sourceWithHooks = await benzinConfig.hooks.preRender(path, originalSource, benzinConfig.adapter, benzinConfig.CDN);
const emojiFileNames = await benzinConfig.adapter.getEmojiFileNames(benzinConfig.CDN, benzinConfig.paths.emojiRoot);
return {
props: {
markdownSource: sourceWithHooks,
emojiFileNames,
path,
}
}
}
export const getStaticPaths = async () => {
const paths = await benzinConfig.adapter.getStaticMarkdownPaths(benzinConfig.CDN);
return {
paths,
fallback: 'blocking',
}
}
const Page: NextPage = ({ markdownSource, emojiFileNames }: any) => {
return (
<>
<Head>
<title>{benzinConfig.title}</title>
<meta name="description" content="TODO" />
<link rel="icon" href={`${benzinConfig.CDN}${benzinConfig.paths.favicon}`}/>
</Head>
<main>
<ReactMarkdown
transformLinkUri={transformLinkUri}
transformImageUri={transformImageUri}
rehypePlugins={[emojiPlugin(emojiFileNames), rehypeSlug, [rehypeAutolinkHeadings, { behavior: 'wrap' }]]}
remarkPlugins={[remarkGemoji, remarkGfm]}
components={{
emoji: Emoji,
img: Image,
code: Code,
h1: 'h2',
h2: 'h3',
h3: 'h4',
h4: 'h5',
h5: 'h6',
} as any}
>
{markdownSource}
</ReactMarkdown>
</main>
</>
);
};
export default Page;
|
